<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/docard.css">
    <link rel="stylesheet" href="__CSS__/nav.css">
    <title>我办卡</title>

</head>
<body>
    <div class="card-nav">
        <a href="{:url('card')}"><span></span>信用卡</a>
        <a href="{:url('cardProgress')}"><span></span>办卡进度</a>
    </div>
    <ul class="card-box">

    </ul>

    {include file="footer" /}
</body>
<script src="__JS__/jquery.min.js"></script>
<script>
    var page = 1, //分页码
        off_on = false, //分页开关(滚动加载方法 1 中用的)
        timers = null; //定时器(滚动加载方法 2 中用的)

    var Loadpage = function(page) {
        $.ajax({
            type:'post',
            url:'/index/index/cardProgress.html',
            data:{pageNo:page,pageSize:10},
            success:function (data){
                var dom = '';
                for (var p of data.data ) {
                    dom += `
                <div class="card-item">
                    <div class="card-item-img">
                        <img src="${p.thumb}" alt="${p.name}">
                    </div>
                    <div class="card-item-title">
                        <p>${p.name}</p>
                        <button class="btn" onclick="location='${p.progress_link}';">立即查询</button>
                    </div>
                </div>
                `
                }
                $('.card-box').append(dom);
            },
            error:function () {alert(data.msg);}
        })
        off_on = true;
    };
    $(document).ready(function() {
        Loadpage();
    });
    $(window).scroll(function() {
        if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
            clearTimeout(timers);
            timers = setTimeout(function() {
                page++;
                console.log("第" + page + "页");
                Loadpage(page);
            }, 300);
        }
    });

</script>
</html>